<template>
    <Card class="player-card" :bordered="false">
      <div slot="title" @dblclick="gobackVideoGridPages">
        <span class='road-title'>{{monitorData.videoMsg.ch_name}}</span>
        <span class="weather">
        <span  v-for='(item, index) in weatherIcon' :key='index'>
          <Icon  :type='item.type' :color='item.color' size=30 />
          {{item.content}}&nbsp;&nbsp;
        </span>
        </span>
      </div> 
      <div class="vidplayer">
        <!-- <flv-video-player v-if="switchWay === '线路一'" :videoSrc="flvVideoSrc"></flv-video-player> -->
        <rtmp-player :src="monitorData.videoMsg.streamUrl"></rtmp-player>
      </div>
      <Row>
        <i-col :span=24>
          <i-col :span="4">
              <p>拥堵状况:
                <Icon v-if='monitorData.videoSta.jam'  type="ios-radio-button-on" color='red' size=30 />
                <Icon v-else  type="ios-radio-button-on" color='#2EFE2E' size=30 />
              </p>
            </i-col>
            <i-col :span="4">
              <p>行人入侵:
                <Icon v-if='monitorData.videoSta.person'  type="ios-man" color='red' size=30 />
                <Icon v-else  type="ios-man" color='gray' size=30 />
              </p>
            </i-col>
            <i-col :span="4">
              <p>停车:
                <Icon v-if='monitorData.videoSta.stop'  type="ios-radio-button-on" color='red' size=30 />
                <Icon v-else  type="ios-radio-button-on" color='#2EFE2E' size=30 />
              </p>
            </i-col>
            <i-col :span=4>
              <p>天气状况:
                <Icon :type="weatherIcon[monitorData.videoSta.weather].type" 
                      :color='weatherIcon[monitorData.videoSta.weather].color' size=30 />
              </p>
            </i-col>
            <i-col :span=4>
              <p>车速:{{monitorData.videoSta.speed}}km/h</p>
            </i-col>
            <i-col :span="4">
              <p><Button slot="extra" type="success" shape="circle" size="default" style="margin-right:10px;font-size:18px;" @click="gobackVideoGridPages">
                <Icon type="ios-arrow-back"></Icon>
                返回
              </Button>
              </p>
            </i-col>
        </i-col>
        
      </Row>
      
    </Card>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
import RtmpPlayer from "./rtmpPlayer";
var node_schedule = require("node-schedule");
export default {
    components: {
    RtmpPlayer
  },
  computed: {
    ...mapState([
      'monitorData',
      'weatherIcon'
    ])
  },
  mounted() {

    var intervalVideoState = node_schedule.scheduleJob("*/5 * * * * *",() => {
        //console.log("实时监控页面视频状态实时获取 -------------> 一个道路状态数据!")
        this.getOneVideoState(this.monitorData.videoMsg.ch_name)
      }
    )
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      //console.log("取消 实时监控页面视频状态实时获取 -------------> 一个道路状态数据");
      intervalVideoState.cancel();
    })
  },
  methods:{
      ...mapActions([
      'closeDetailsLoadVideoGridPages',
      'getOneVideoState'
    ]),
    gobackVideoGridPages() {
      this.closeDetailsLoadVideoGridPages()
    }
  }
}
</script>
<style lang='less'>
.vidplayer {
  height: 100%;
  width: 100%;
}
.player-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 40px;
  margin-top:5%;
}
.player-card .ivu-card-head .road-title{
  font-size: 2.5rem;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: left;
  font-weight:bold;
}
.player-card .ivu-card-body {
  padding: 3px;
  background-color: #13a4c2;
}
.ivu-card-body p {
  font-size: 20px;
  height: 42px;
  line-height: 42px;
  color: #fff;
  text-align: center;
}
.weather {
  font-size:20px;
  color:#fff;
  font-weight:normal;
  float:right;
  line-height: 40px;
}
</style>


